<!--班车每日点名座位信息页-->
<template>
    <div style="height: 100%;">
        <m-page-list
                :option="option"
                :page="page"
                :total="total"
                :table-data="tableData"
                :table-loading="tableLoading"
                v-model:value="query"
                @col-btn-click="colBtnClick"
                @search-data="searchData"
        />
        <m-dialog-form ref="dialogRef" :data="dialogData" v-model:show="dialogShow" :option="dialogOption" @confirm="dialogConfirm" ></m-dialog-form>

        <!--请假弹窗-->
        <m-dialog-form ref="leaveDialogRef" :data="leaveDialog.data" v-model:show="showLeaveDialog" :option="leaveDialog" @confirm="rollcallLeave" ></m-dialog-form>
    </div>
</template>

<script setup>

  import {ref,reactive,onMounted,nextTick,watch ,defineProps} from 'vue'
  import {onBeforeRouteLeave ,useRoute} from 'vue-router'
  //组件
  import MPageList from '@/components/PageList'
  import MDialogForm from '@/components/DialogForm/DialogForm'
  //请求
  import {getRollCallDailyShuttleSeatData, addRollCallDailyShuttleSeatData,editRollCallDailyShuttleSeatData,delRollCallDailyShuttleSeatData,rollCallDailyShuttleLeave,rollCallDailyShuttleCancelLeave} from '@/request/api/basicData'

  import {usePageList} from "../../composables/pageList";
  // import {useRouteQuery} from "../../composables/routeQuery";
  import {refOpt} from "../const";

  const route = useRoute();
  const props = defineProps(['shuttleData']);

  let opts = {
    auth_id: '',
    getApi: getRollCallDailyShuttleSeatData,addApi:addRollCallDailyShuttleSeatData,editApi:editRollCallDailyShuttleSeatData,delApi:delRollCallDailyShuttleSeatData,
    idKey: 'row_id',
  };
  let {option,page,total,pageLoading,tableLoading,tableData,query,dialogRef,dialogShow,dialogData,defDialogData,dialogOption,
    colBtnClick,searchData,getDataList,dialogConfirm} = usePageList(opts);

  // useRouteQuery(onRouteQueryChange)

  option.conditions = [
    /*{...refOpt.rollcall_shuttle_name,field_id: 'shuttle_id',entityKey: 'row_id', valueKey: [{'shuttle_id':'row_id'}] ,col: 8,rewriteInput: true,
      refCols: [
        {prop: 'row_id',label: '行号' },
        {prop: 'shuttle_no',label: '点名班车号' },
        {prop: 'shuttle_name',label: '点名班车名' },
      ]},*/
    {...refOpt.stop_name, label: '乘车点名称',col: 8,rewriteInput: true},
    {...refOpt.shuttle_seat_name, label: '售票班车座位表名',col: 8,rewriteInput: true},
    {label: '乘车人名称',type: 'text',field_id: 'passenger_name',col: 8},
    {label: '购票人手机',type: 'number',field_id: 'parents_phone',col: 8},
    {label: '乘车人证件号',type: 'text',field_id: 'idcard_no',col: 8},
    {label: '班级',type: 'text',field_id: 'class_',col: 8},
  ];

  option.hLBtns = [];
  option.cols = [
    {prop: 'shuttle_id', label: '点名班车号'},
    {prop: 'seat_no', label: '实际座位号',},
    {prop: 'state', label: '状态'},
    {prop: 'rollcall_stop_name', label: '点名站点',},
    {prop: 'stop_no', label: '乘车点编号',},
    {prop: 'stop_name', label: '乘车点名称',},
    {prop: 'passenger_pic_link', label: '乘车人照片',type: 'picture',hidePic: true},
    {prop: 'path_type', label: '乘车点类型',},
    {prop: 'passenger_name', label: '乘车人姓名',},
    {prop: 'idcard_type', label: '乘车人证件类型',},
    {prop: 'idcard_no', label: '乘车人证件号',},
    {prop: 'class_', label: '班级',},
    {prop: 'parents_take_children_type_no', label: '下车接送方式编号',},
    {prop: 'parents_take_children_type_name', label: '下车接送方式名称',},
    {prop: 'school_no', label: '站点编号',},
    {prop: 'school_name', label: '站点名称'},
    {prop: 'parents_name', label: '购票人姓名',},
    {prop: 'parents_phone', label: '购票人手机',},
    {prop: 'customer_id', label: '购票人微信公众号用户号',},
    {prop: 'order_no', label: '订单号',},
    {prop: 'shuttle_seat_no', label: '售票班车座位表号',},
    {prop: 'shuttle_seat_name', label: '售票班车座位表名',},
    {prop: 'ticket_seat_no', label: '售票座位号',},
    {prop: 'ticket_effective_date_begin', label: '车票有效期起日',},
    {prop: 'ticket_effective_date_end', label: '车票有效期止日',},
    // {prop: 'remarks', label: '请假起日',},  // TODO 未有字段
    // {prop: 'remarks', label: '请假止日',},  // TODO 未有字段
    {prop: 'leave_reason', label: '请假原因',},
    {prop: 'rollcall_name', label: '点名员名',},
    {prop: 'rollcall_time', label: '点名时间',},
    {prop: 'push_message_result', label: '推送信息结果',},
    {prop: 'remarks', label: '备注',},
  ];
  option.colBtns.splice(1,0,
    {title: '请假',id: 'leave',type: 'warning',
    filterMethod: (scope) => scope.row.state === '未点名',
    event: (scope) => {
      let { row_id} = scope.row
      leaveDialog.data = {seat_id: row_id}
      showLeaveDialog.value = true}
    },
    {title: '取消请假',id: 'leave',type: 'warning',
    filterMethod: (scope) => scope.row.state === '请假',
    event: (scope) => {
      let { row_id} = scope.row
      rollcallCancelLeave(row_id)
    },}
  );
  // 行内增加清除按钮
  option.colBtns.pop();
  option.colBtns.push({title: '清除',id: 'clear',type: 'danger',event: clearSeat})

  dialogOption.fieldList = [

    // {...refOpt.shuttle_id,field_id: 'shuttle_no', label: '点名班车编号',col: 2, required: true},
    /*{...refOpt.rollcall_shuttle_name,editDisabled: true,field_id: 'shuttle_id',entityKey: 'row_id',valueKey: [{ 'shuttle_id': 'row_id'}], label: '点名班车号',col: 2, required: true,
      refCols: [
        {prop: 'row_id',label: '行号' },
        {prop: 'shuttle_no',label: '点名班车号' },
        {prop: 'shuttle_name',label: '点名班车名' },
        {prop: 'direction',label: '方向' },
      ]},*/
    {...refOpt.stop_id,field_id: 'stop_no', label: '乘车点编号',},
    {...refOpt.stop_name, label: '乘车点名称',valueKey: [{'stop_no': 'stop_id'},'stop_name'],},
    {field_id: 'seat_no', label: '实际座位号',type: 'number',col: 2, required: true},
    {field_id: 'order_no', label: '订单号',type: 'text',col: 2 ,},
    {field_id: 'passenger_name', label: '乘车人姓名',type: 'text',col: 2,},
    {field_id: 'passenger_pic_link', label: '乘车人照片',type: 'picture',limit: 1,col: 2,},
    {field_id: 'idcard_type', label: '乘车人证件类型',type: 'text',col: 2,},
    {field_id: 'idcard_no', label: '乘车人证件号',type: 'text',col: 2,},
    {...refOpt.school_id,field_id: 'school_no', label: '站点编号',},
    {...refOpt.school_name, label: '站点名称',valueKey: [{'school_no': 'school_id'},'school_name']},
    {field_id: 'class_', label: '班级',type: 'text',col: 2,},
    {field_id: 'parents_name', label: '购票人姓名',type: 'text',col: 2,},
    {field_id: 'parents_phone', label: '购票人手机',type: 'text',col: 2,},
    {field_id: 'customer_id', label: '购票人微信公众号用户号',type: 'text',col: 2,},
    {...refOpt.shuttle_seat_id,field_id: 'shuttle_seat_no', label: '售票班车座位表号',col: 2,},
    {...refOpt.shuttle_seat_name, label: '售票班车座位表名',valueKey: [{'shuttle_seat_no': 'shuttle_seat_id'},'shuttle_seat_name'],col: 2},
    {field_id: 'ticket_seat_no', label: '售票座位号',type: 'text',col: 2,},
    {field_id: 'state',label: '检票状态',type: 'picklist',
      options: [
        {label: '未售',value: '未售'},
        {label: '未点名',value: '未点名'},
        {label: '缺席',value: '缺席'},
        {label: '出席',value: '出席'},
        {label: '请假',value: '请假'},
      ],
      col:2,},
    {...refOpt.leave_school_id,field_id: 'parents_take_children_type_no',col:2,},
    {...refOpt.leave_school_name,field_id: 'parents_take_children_type_name',col:2,valueKey: [{parents_take_children_type_no: 'leave_school_id',},{parents_take_children_type_name: 'leave_school_name'}]},
    {field_id: 'ticket_effective_date_begin', label: '车票有效期起日',type: 'date',dateFormat: 'YYYY-MM-DD',col: 2,},
    {field_id: 'ticket_effective_date_end', label: '车票有效期止日',type: 'date',dateFormat: 'YYYY-MM-DD',col: 2,},
    {field_id: 'remarks', label: '备注',type: 'textarea',col: 4,},
  ];


  /*监听数据*/
  watch(() => props.shuttleData, (newVal) => {
    console.log('监听数据',newVal);
    if (newVal){
      let {row_id,shuttle_id,shuttle_name,shuttle_seat_id} = newVal;
      // query.value = {...query.value, shuttle_id:row_id};
      opts.baseQuery = {shuttle_id:row_id}
      defDialogData.shuttle_id = row_id;
      getDataList();
    }
  },{immediate: true});

  /*--------------- 请假、取消请假 ----------------*/
  const leaveDialog = reactive({
    title: '请假',
    fieldList: [
      {field_id: 'leave_reason', label: '请假原因',type: 'textarea',col: 3,required: false},
    ],
    data: {}}),
    showLeaveDialog = ref(false),
    leaveDialogRef = ref(null);

    function rollcallLeave(data){
      pageLoading.value = true
      rollCallDailyShuttleLeave(data.data).then(res =>{
        pageLoading.value = false
        if (res.errcode != 0) return;
        ElMessage({type: 'success',message: '提交成功'});
        showLeaveDialog.value = false;
        getDataList();
      })
    }
    function rollcallCancelLeave(id){
      ElMessageBox.confirm('确定取消请假？', '取消请假', {
        'cancelButtonText': '取消',
        'confirmButtonText': '确定',
        callback: (action) => {
          if (action === 'confirm'){
            pageLoading.value = true
            rollCallDailyShuttleCancelLeave(id).then(res =>{
              pageLoading.value = false
              if (res.errcode != 0) return;
              ElMessage({type: 'success',message: '提交成功'});
              getDataList();
            })
          }
        },
      })
    }

    function clearSeat(scope) {
      ElMessageBox.confirm('确定清除该座位表数据？', '清除座位数据', {
        'cancelButtonText': '取消',
        'confirmButtonText': '确定',
        callback: (action) => {
          if (action === 'confirm'){
            pageLoading.value = true
            let {row_id,shuttle_id,seat_no,shuttle_seat_no,shuttle_seat_name} = scope.row
            console.log(scope.row);
            let data = {
              row_id,state: '未售',shuttle_id,seat_no,shuttle_seat_no,shuttle_seat_name
            }
            editRollCallDailyShuttleSeatData(data,false).then(res =>{
              pageLoading.value = false
              if (res.errcode != 0) return;
              ElMessage({type: 'success',message: '清除成功'});
              getDataList();
            })
          }
        },
      })

    }

</script>

<style scoped>

</style>
